import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import indexPage from "@/views/indexPage.vue";
import brandPage from "@/views/brandPage.vue";
import keyBoard from "@/views/keyBoard.vue";
import filterPage from "@/views/filterPage.vue";
import customDirectives from "@/views/customDirectives.vue";
import lifeCycle from "@/views/lifeCycle.vue";
import animatePage from "@/views/animatePage.vue";
import fatherPage from "@/views/fatherPage.vue";
import axiosPage from "@/views/axiosPage.vue";
import antPage from "@/views/antPage.vue";
import routerParameters from "@/views/routerParameters.vue";
import pageA from "@/views/pageA.vue";
import pageB from "@/views/pageB.vue";
//1.引入路由

Vue.use(VueRouter)

//3.创建映射关系
const routes = [
    {
        path:'',//路由重定向
        redirect:"fatherPage"
    },
    {
        path: '/',//路径
        name: 'home',//名称
        component: HomeView//
    },
    {
        path: '/about',
        name: 'about',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
    },
  {
    path:'/index',
    name:'index',
    component: indexPage
  },{
    path: '/brand',
        name:'brand',
        component:brandPage
    },{
    path:"/keyBoard",
        name:'keyBoard',
        component: keyBoard
    },{
    path:"/filterPage",
        name:'filterPage',
        component:filterPage,
        children:[
            {
                //路由中嵌套的子路由不带/
                path:'animatePage',
                component:animatePage
            },{
                path:'axiosPage',
                // component:axiosPage
                components:{
                    keyBoard,
                    brandPage
                }
            }
        ]
    },{
    path:'/customDirectives',
        name:'customDirectives',
        component:customDirectives
    },{
    path:'/lifeCycle',
        name:'lifeCycle',
        component:lifeCycle
    },{
    path:'/animatePage',
        name:'animatePage',
        component:animatePage
    },{
    path:'/fatherPage',
        name:'fatherPage',
        component:fatherPage
    },{
    path:'/axiosPage',
        name:'axiosPage',
        component:axiosPage
    },{
    path:'/antPage',
        name:'antPage',
        component:antPage
    },
    {
        path:'/routerParameters',
        name:'routerParameters',
        component:routerParameters
    },{
    path:'/pageA',
        name:'pageA',
        component:pageA
    },{
    // path: '/pageB/sex/num',
        path:'/pageB',
        name:'pageB',
        component:pageB
    }
]

//2.创建路由实例
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,//网站地址
    routes
})

export default router
